<template>
    <el-dialog :show-close="false" :visible.sync="visible" custom-class="super-dialog" top="calc(4rem + 4px)" width="100%">
        <div class="main" id="main">
            <el-row>
                <el-col :span="18" class="col-self-18">
                    <div class="live-window" style="background:#2d2d2d">
                        <div @click="close" class="live-window-close pd-8 color-fff cursor-pointer">
                            <i class="el-icon el-icon-close weight-bold" style="color:#606060;font-size:2vw"></i>
                        </div>
                        <div class="height-92b position-relative">
                            <div :style="liveBg" class="live-window-bg height-94b"></div>
                            <video id="player-detail" playsinline preload="auto" style="height:100%;width:100%;z-index: 100;position: relative;" v-if="visible" webkit-playsinline></video>
                            <div class="need-pay" style="z-index: 100000;" v-show="need_pay">
                                <div class="need-pay-close">
                                    <i @click="need_pay=false" class="el-icon el-icon-close color-fff cursor-pointer font-12"></i>
                                </div>
                                <el-image :src="require('@/assets/icon/live/coin.png')" fit="cover" style="width: 65px;height: 65px;margin-top: 23px;"></el-image>
                                <div class="mt-15 font-18 color-fff">{{$store.state.config.coin_name}}{{$store.state.config.coin_name}}不足</div>
                                <div class="mt-5 color-fff font-13">{{$store.state.config.coin_name}}余额不足 请先充值</div>
                                <div @click="toRecharge" class="need-pay-recharge cursor-pointer">立即充值</div>
                            </div>
                            <div class="need-pay" style="height: 160px;z-index: 100000;" v-show="over_visible">
                                <div class="need-pay-close">
                                    <i @click="over_visible=false" class="el-icon el-icon-close color-fff cursor-pointer font-12"></i>
                                </div>

                                <div class="mt-15 font-18 color-fff" style="margin-top:70px">直播已结束</div>
                            </div>
                            <with-pay :room_info="room_info" @close="need_fee=false" @donePay="need_fee=false;init()" @needRecharge="need_pay=true;need_fee=false;" ref="pay" v-if="need_fee"></with-pay>
                        </div>
                        <div class="height-8b live-window-gift flex align-center pl-20 pr-20 jus-around position-relative" style="z-index:10000">
                            <div :key="index" class="cursor-pointer" v-for="(item,index) in gifts" v-if="index<18">
                                <el-image :src="item.icon" @click="chooseGift(index)" fit="cover" style="width: 2vw; height: 2vw"></el-image>
                            </div>
                            <div :style="giftPosition" class="show-gift pd-10" v-if="choose_gift<18 && choose_gift!=null">
                                <div class="color-fff flex align-center width-100b">
                                    <span class="font-17">{{gifts[choose_gift].name}}</span>
                                    <div class="flex align-center ml-15">
                                        <el-image :src="require('@/assets/icon/live/coin.png')" fit="cover" style="width: 18px;height: 18px;"></el-image>
                                        <span class="font-12">{{gifts[choose_gift].price}}</span>
                                    </div>
                                </div>
                                <div class="mt-10">
                                    <el-image :src="gifts[choose_gift].icon" fit="cover" style="width: 70px;height: 70px;"></el-image>
                                </div>
                                <div @click.stop="sendGift(gifts[choose_gift])" class="mt-10 show-gift-send cursor-pointer">赠送</div>
                            </div>
                            <div class="color-fff font-15 position-relative" style="background: #272337;border-radius: 5px;border: 1px solid #5B5769;height: 86%;justify-content: space-around;">
                                <div @click="more_gift_visible=!more_gift_visible" class="flex flex-dre-column text-center align-center pl-8 pr-8 font-14 cursor-pointer height-100b jus-around">
                                    <div>
                                        <i class="el-icon el-icon-arrow-up" style="font-size: 1.2vw;" v-show="!more_gift_visible"></i>
                                        <i class="el-icon el-icon-arrow-down" style="font-size: 1.2vw;" v-show="more_gift_visible"></i>
                                    </div>
                                    <div style="font-size:0.8vw">礼物</div>
                                </div>
                                <div class="more-gift pd-10" v-show="more_gift_visible">
                                    <div class="font-14 color-fff flex align-center jus-between">
                                        <div class="font-16">礼物</div>
                                        <div>
                                            <i @click="more_gift_visible=false" class="el-icon el-icon-close cursor-pointer"></i>
                                        </div>
                                    </div>

                                    <div class="more-gift-list">
                                        <el-row :gutter="12">
                                            <el-col :key="index" :span="6" class="mt-20" v-for="(item,index) in gifts" v-if="index>=18">
                                                <div :class="{'gift-item-choose':choose_gift==index}" @click="chooseGift(index)" class="flex flex-dre-column align-center jus-center color-fff cursor-pointer gift-item">
                                                    <el-image :src="item.icon" fit="cover" style="width: 44px; height: 44px"></el-image>
                                                    <div class="mt-3 font-12">{{item.name}}</div>
                                                    <div class="mt-5 font-13 color-999" v-show="choose_gift!=index">{{item.price}}{{$store.state.config.coin_name}}</div>
                                                    <div @click.stop="sendGift(gifts[choose_gift])" class="mt-5 font-13 color-fff" style="width: 100%;text-align: center;background: #FF1C6D; border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;" v-show="choose_gift==index">赠送</div>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                            <div @click="toRecharge" class="color-fff font-15 flex flex-dre-column text-center align-center pl-6 pr-6 font-14 cursor-pointer" style="background: #272337;border-radius: 5px;border: 1px solid #5B5769;height: 86%;justify-content: space-around;">
                                <div>
                                    <el-image :src="require('@/assets/icon/live/recharge.png')" fit="cover" style="width: 1.5vw; height: 1.5vw;"></el-image>
                                </div>
                                <div style="font-size:0.8vw">充值</div>
                            </div>
                        </div>
                        <!-- 直播区 -->
                    </div>
                </el-col>
                <el-col :span="6" class="col-self-6">
                    <!-- 评论区 -->
                    <div class="comment-window bg-sidebar">
                        <comment :online_users="online_users" :room_info="room_info" @sendMessage="sendMessage" ref="comment"></comment>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</template>

<script>
import withPay from './width-pay.vue'
import comment from './comment.vue'
import TCPlayer from 'tcplayer.js'
import 'tcplayer.js/dist/tcplayer.min.css'
export default {
    components: {
        comment,
        withPay,
    },
    props: {
        choose_live: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    watch: {
        visible(value) {
            if (!value) {
                this.leaveRoom()
            }
            if (this.player) {
                this.player.off('webrtcevent', function (event) {
                    if (event.data.code == 1005) {
                        that.player.dispose()
                        that.player = null
                        that.over_visible = true
                    }
                })

                this.player.off('error', function (error) {
                    that.player.dispose()
                    that.player = null
                    that.over_visible = true
                })
            }
        },
        need_fee(value) {
            if (!value) {
                this.$refs.pay.msg = ''
                this.$refs.pay.step = 1
            }
        },
        '$store.state.system.drop'(value) {
            if (value) {
                // this.$message({
                //     message: '您已被主播踢出房间！',
                //     type: 'error',
                //     customClass: 'super-message',
                // })
                this.visible = false
                this.$store.state.system.drop = false
                this.leaveRoom()
            }
        },
    },
    data() {
        return {
            visible: false,
            gifts: [],
            more_gift_visible: false,
            choose_gift: null,
            need_pay: false,
            need_fee: false,
            over_visible: false,
            room_info: null,
            online_users: [],
            player: null,
            joined: false,
        }
    },
    computed: {
        liveBg() {
            return "background:url('" + this.choose_live.thumbnail + "') no-repeat center center;background-size:cover;overflow: hidden;filter: blur(30px);"
        },
        giftPosition() {
            return 'left: ' + this.choose_gift * 3.5 + 'vw;'
        },
    },
    mounted() {
        this.getGifts()
    },
    methods: {
        leaveRoom() {
            this.over_visible = false
            this.$refs.comment.comments = []
            if (this.joined) {
                this.joined = false
                this.$request.post('/live/leave_room', { room_id: this.choose_live.room_id })
            }
            if (this.player) {
                this.player.dispose()
                this.player = null
            }
            this.$refs.pay.msg = ''
            this.$refs.pay.step = 1
        },
        init() {
            // console.log(this.choose_live)
            let param = {
                room_id: this.choose_live.room_id,
            }
            this.$request.get('/live/live_info', param).then((res) => {
                this.room_info = res
                if (res.status != 1) {
                    this.over_visible = true
                    this.$message({
                        message: '直播已结束',
                        type: 'error',
                        customClass: 'super-message',
                    })
                } else {
                    this.$request.get('/live/online_user', param).then((res) => {
                        this.online_users = this.online_users.concat(res.items)
                    })

                    //不需要付费再走下面操作
                    this.$request
                        .post('/live/join_room', { room_id: this.choose_live.room_id })
                        .then((res) => {
                            this.joined = true
                            this.loadStream()
                        })
                        .catch((err) => {
                            if (err.message == '主播似乎不欢迎你哦~') {
                                this.$message({
                                    message: err.message,
                                    type: 'error',
                                    customClass: 'super-message',
                                })
                                this.visible = false
                                this.$store.state.system.drop = false
                                this.leaveRoom()
                            }

                            if (err.data && err.data.price) {
                                this.need_fee = true
                            } else {
                                this.$message({
                                    message: err.message,
                                    type: 'error',
                                    customClass: 'super-message',
                                })
                            }

                            // console.log('被踢等异常操作', err)
                        })
                }
                this.$refs.comment.comments = res.message
            })
        },

        getGifts() {
            this.$request.get('/live/gift_list').then((res) => {
                this.gifts = res
            })
        },
        chooseGift(index) {
            if (index == this.choose_gift) {
                this.choose_gift = null
            } else {
                this.choose_gift = index
            }
        },
        close() {
            this.visible = false
        },
        sendGift(gift) {
            let param = {
                room_id: this.room_info.room_id,
                type: 'gift',
                gift_id: gift.gift_id,
                amount: 1,
            }
            this.$request
                .post('/live/send_message', param)
                .then((res) => {
                    this.choose_gift = null
                    this.$message({
                        message: '赠送' + gift.name + '成功',
                        type: 'success',
                        customClass: 'super-message',
                    })
                })
                .catch((err) => {
                    if (err.code == 301) {
                        this.need_pay = true
                    }
                    this.$message({
                        message: err.message,
                        type: 'error',
                        customClass: 'super-message',
                    })
                })
                .fainally((res) => {})
        },
        loadStream() {
            if (this.player) {
                this.player.dispose()
                this.player = null
            }

            this.$nextTick(() => {
                let param = {
                    room_id: this.room_info.room_id,
                    action: 'pull',
                    type: 'webtrc',
                }
                this.$request.get('/live/stream_url', param).then((res) => {
                    this.player = TCPlayer('player-detail', {
                        sources: [
                            {
                                src: res.url,
                            },
                        ],
                        muted: true,
                        licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1320915382_1/v_cube.license',
                        playbackRates: [],
                        autoplay: true,
                        controls: false,
                    })
                    let that = this
                    this.player.on('webrtcevent', function (event) {
                        if (event.data.code == 1005) {
                            that.player.dispose()
                            that.player = null
                            that.over_visible = true
                        }
                    })

                    this.player.on('error', function (error) {
                        that.player.dispose()
                        that.player = null
                        that.over_visible = true
                    })
                })
            })
        },
        toRecharge() {
            this.$router.push({ path: '/wallet/recharge' })
        },
        sendMessage() {
            // if(!this.joined){

            // }

            let ref = this.$refs.comment

            let param = {
                room_id: this.room_info.room_id,
                type: 'text',
                message: ref.content,
            }

            ref.button_loading = true
            this.$request
                .post('/live/send_message', param)
                .then((res) => {
                    ref.content = ''
                    this.$message({
                        message: '发送成功',
                        type: 'success',
                        customClass: 'super-message',
                    })
                })
                .catch((err) => {
                    this.$message({
                        message: err.message,
                        type: 'error',
                        customClass: 'super-message',
                    })
                })
                .finally(() => {
                    ref.button_loading = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__header {
    padding: 0;
}
/deep/.el-dialog__body {
    padding: 0;
}
/deep/.el-dialog {
    margin: 0;
}
.main {
    z-index: 10000;
    background: #151225;
    height: calc(100vh - 4rem - 4px);
    overflow-y: hidden;
}
.el-row,
.col-self-6,
.col-self-18,
.live-window,
.comment-window {
    height: 100%;
}
.live-window {
    &-close {
        position: absolute;
        border-radius: 100%;
        background: #ffffff1a;
        top: 30px;
        left: 40px;
        z-index: 10001;
    }
    &-close:hover {
        background: #ffffffcc;
    }
    &-bg {
        background-size: 100% 100% !important;
        position: absolute;
        top: 0;
        width: 100%;
    }
    &-gift {
        background: #151225;
    }
}
.more-gift {
    width: 300px;
    position: absolute;
    top: -350px;
    background: #151225;
    border-radius: 6px;
    right: -80%;
    &-list {
        height: 300px;
        overflow-y: scroll;
    }
    &-list::-webkit-scrollbar {
        display: none; /*隐藏滚动条*/
    }
}
.gift-item {
    border-radius: 8px;
    border: 1px solid transparent;
    &-choose {
        border-radius: 4px;
        border: 1px solid #272337;
        background: #3e3950;
    }
}
.need-pay {
    position: absolute;
    transition: 0.2s all;
    background: linear-gradient(to bottom, #ff5994, #ff1c6d);
    width: 200px;
    height: 210px;
    left: calc(50% - 100px);
    top: calc(50% - 105px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    &-recharge {
        position: absolute;
        bottom: 15px;
        color: #ff1c6d;
        background: #fff;
        width: 80%;
        text-align: center;
        padding: 5px 0px;
        border-radius: 4px;
    }
}
.show-gift {
    position: absolute;
    top: -161px;
    background: #151225;
    border-radius: 6px;
    width: 161px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.2s all;
    &-send {
        position: absolute;
        bottom: 10px;
        color: #fff;
        background: #ff1c6d;
        width: 80%;
        text-align: center;
        padding: 2px 0px;
        border-radius: 4px;
    }
}
.super-dialog {
    z-index: 3000;
}

.interest {
    width: 80px;
    background-color: #ff1c6d;
    color: #fff;
    height: 32px;
    line-height: 32px;
    border-radius: 50px;
    margin-left: 20px;
    text-align: center;
    font-size: 11px;
}

.followed {
    width: 80px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-left: 20px;
    border-radius: 50px;
    font-size: 11px;
}
</style>